// HtmlWebpackPlugin 以某个html文件作为模板生成新的html文件
// 并把打包好的代码引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    // mode 模式中的 production 代表生产模式
    mode: 'production',
    devServer: {
        port: 2333,
    },
    // entry 入口
    entry: './src/main.js',
    // output 出口
    output: {
        clean: true, // 每次打包之前清空 dist 目录下的代码
        path: path.join(__dirname, 'dist'),  // 出口路径
        filename: 'bundle.js',  // 出口文件名
    },
    plugins: [new HtmlWebpackPlugin({
        template: './public/index.html' // 以对应的html文件作为模板生成新的html文件
    })],
    module: {
        rules: [  // loader 的规则
            {
                test: /\.css$/i,  // 要处理的文件是什么
                // css-loader是作用是让webpack能够解析css文件
                // style-loader 可以把解析好的样式插入到DOM中
                // 数组中的 loader 的使用顺序是从右到左
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                // less-loader 让webpack 处理 less 文件
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                // asset 模式会把小于 8kb 的转化为 base64
                // 把大于8kb的原图片输出
                type: 'asset', 
            },
            {
                // 不需要处理字体文件，直接原文件输出即可
                // 所以使用的是 asset/resource 模式
                // asset/resource 模式会直接输出原文件
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                type: 'asset/resource',
                generator: {
                    // 根据原文件生成的 文件的位置和名字
                    filename: 'font/[name].[hash:6][ext]'
                }
            },
            {
                test: /\.js$/i,
                exclude: /(node_modules)|(bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ],
    },
};